<!--///////////////////////////////////////////////////////////////////////
//                                                                       //
//   iReader! (c) 2010 Samabox. All rights reserved.                     //
//                                                                       //
////////////////////////////////////////////////////////////////////////-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>iReader</title>
	<base href="chrome-extension://ppelffpjgkifjfgnbaaldcehkpajlmbc/">
	<!--base href="chrome-extension://ehbhbcejonbhdmlgffbahnjldlobaffk/"-->
	<style type="text/css">
		body {
			margin: 0px;
			padding: 0px;
			background-color: transparent;
			?background-color: rgba(0, 0, 0, 0.8);
			-webkit-user-select: none;
			text-align: -webkit-center;
		}
		
		body, td, input, select, textarea, button {
			color: hsl(273, 10%, 20%);
		}
	    
	    h1 {
	        font-size: 1.25em;
	    }
	    
	    h2 {
	        font-size: 1.125em;
	    }
	    
	    h3 {
	        font-size: 1.05em;
	    }
		
		a {
			text-decoration: none;
			color: #35C;
		}
		
		a:hover {
			text-decoration: underline;
			background-color: #fafafa;
		}
		
		blockquote {
		    border-left: 5px solid #eaeef1;
		    color: #555;
		    margin-left: 0px;
		    margin-right: 0px;
		    padding: 0px 20px;
		}
		
		hr {
			height: 0px;
			border: none;
		    border-top: 1px solid #ddd;
		}
		
		br {
			clear: left;
		}
		
		#article.rtl blockquote {
			border-left: none;
		    border-right: 5px solid #F1F1F1;
		}
		
		#articleContainer {
			?position: absolute;
			?left: 50%;
			width: 70%;
			height: 100%;
			?margin-left: -431px;
			overflow: auto;
			text-align: left;
		}
		
		#article {
			display: inline-block;
			width: 100%;
			font: 19px Georgia, Times, "Times New Roman", serif;
			line-height: 160%;
			?text-align: justify;
			?margin: 20px 12px 20px 34px;
			?margin: 20px 0px;
			?padding: 45px 70px;
		}
		
		#article.rtl {
			direction: rtl;
			text-align: right;
		}
		
		.page {
			?display: inline-block;
			border: 1px solid #C3C3C3;
			background-color: #fdfdfd;
			?padding: 45px 70px;
			margin: 12px 12px 0px 23px;
			-webkit-user-select: auto;
			/*-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 40px;*/
		}
		
		.page:first-of-type {
            margin-top: 20px;
		}
		
		.page:last-of-type {
            margin-bottom: 20px;
		}
		        
		.page .pageNumber {
			font: bold 0.7em Helvetica, sans-serif;
			margin-left: 12px;
			color: #fff;
			background-color: #9f809d;
			border-radius: 5px 0px 0px 5px;
			float: right;
			margin: 10px -1px;
			padding: 5px 10px;
			cursor: default;
			-webkit-user-select: none;
		}
		
		.page .contentWrapper {
			padding: 45px 70px;
		}
		
		.page:first-of-type:not(:last-of-type) .contentWrapper {
			padding-bottom: 15px;
		}
		
		.page:last-of-type:not(:first-of-type) .contentWrapper {
			padding-top: 15px;
		}
		
		.page:not(:first-of-type):not(:last-of-type) .contentWrapper {
 			padding-top: 15px;
 			padding-bottom: 15px;
		}
		
        .page table {
            font-size: 0.9em;
            text-align: left;
        }

        .page.rtl table {
            text-align: right;
        }
		
		#title {
			display: none;
	        font-weight: bold;
	        font-size: 1.33em;
	        line-height: 1.25em;
			margin-bottom: 1.5em;
			?padding: 45px 70px;
			?padding-bottom: 0px;
	    }
    
        .page:first-of-type #title {
            display: block;
        }
		
		.content * {
			word-wrap: break-word;
		}
		
		.content pre, .content xmp, .content plaintext, .content listing {
			?white-space: normal;
		}
		
		.content pre, .content code {
			border: 1px dashed #d3c8cf;
			border-left: 5px solid #f5edf2;
			padding: 5px 5px 5px 10px;
		}
		
        .content img {
            float: left;
            margin: 12px 12px 12px 0px;
			max-width: 100%;
			height: auto;
        }
		
        .content.disableImages img {
            display: none !important;
        }
        
        .content img.tinyImage {
            float: none;
            margin: 0;
        }
        
        .content img.largeImage {
            float: none;
            margin: 1em auto;
            display: block;
			clear: both;
			/*-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 20px;*/
        }
		
		.content a img {
			border: none;
        }

        .content .float {
            margin: 8px 0;
            font-size: 70%;
            line-height: 1.4;
            text-align: left;
        }
		
		#article.rtl .content .float {
			text-align: right;
			
		}

        .content .float.left {
            float: left;
            margin-right: 20px;
        }

        .content .float.right {
            float: right;
            margin-left: 20px !important;
        }
        
        .content .float.full-width {
            float: none;
            display: block;
        }

		.footer {
			display: none;
			direction: ltr;
			text-align: left;
			margin-top: 2em;
			clear: both;
		}
    
        .page:last-of-type .footer {
			?display: block;
        }

		.footer table {
			?border: solid 1px #ddd;
    		border-radius: 30px;
			border-spacing: 0px;
			border-collapse: collapse;
			text-shadow: white 1px 1px 1px;
			/*-webkit-box-shadow: #DDD 0px 1px 2px;*/
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.04, #f9f9f9), 
           		color-stop(0.98, #f0f0f0), color-stop(1, #eee));
		}
		
		.footer td {
			color: #999;
			padding: 0px 13px;
			vertical-align: middle;
			font-family: MyriadPro-Semibold, Tahoma, Verdana, sans-serif;
			font-size: 15px;
			font-weight: bold;
		}
		
		.footer img {
			vertical-align: middle;
			padding-right: 5px;
			margin: -3px 0px -4px 0px;
			height: 32px;
			width: 32px;
			opacity: 0.7;
			max-width: none;
		}
		
		.articleInfo {
			display: none;
			direction: ltr;
			background: #fafafa;
			text-align: center;
			margin-top: 2em;
			padding-left: 15px;
			border: solid 4px #eee;
			border-left: solid 1px #eee;
			border-right: none;
			page-break-inside: avoid;
			/*-webkit-box-shadow: #ddd 0px 0px 3px;*/
		}
		
		.articleInfo table, .articleInfo td {
			border-spacing: 0px;
			border-collapse: collapse;
			margin: 0px;
			padding: 0px;
		}
		
		.articleInfo .url {
			font-family: monospace;
			font-size: 1.1em;
			?font-weight: bold;
			word-break: break-all;
			position: relative;
			z-index: 100;
		}
		
		.articleInfo .url .code {
			letter-spacing: 2px;
		}
		
		.articleInfo img {
			vertical-align: middle;
		}
		
		.articleInfo img.icon {
			margin-right: 10px;
		}
		
		.articleInfo img.favicon {
			border: solid 1px #ddd;
		}
		
		.articleInfo img.qr {
			border: solid 1px #eee;
			border-top: none;
			border-bottom: none;
		}
		
		.articleInfo .website {
			display: inline-block;
		}
		
		.loader {
			display: none;
			text-align: center;
			margin-bottom: 20px;
		}
    
        .page:last-of-type .loader {
            display: block;
        }
		
		#controls {
			position: fixed;
			bottom: 30px;
			width: 558px;
			left: 50%;
			margin-left: -304px; /* width / 2 - padding-left */
			padding: 15px 25px;
			background-color: rgba(0, 0, 0, 0.75);
	   		border-radius: 12px;
			opacity: 0;
			z-index: 100;
			-webkit-transition: opacity 1.25s;
		}

		#controls.visible {
			opacity: 1;
			-webkit-transition: opacity 1s;
		}
		
		#controls img {
			vertical-align: middle;
			float: left;
			margin-right: 12px;
			cursor: pointer;
			opacity: 0.8;
		}
		
		#controls img:hover {
			opacity: 1;
		}
		
		#controls img.newGroup {
			margin-left: 15px;
		}
		
		#controls img:first-of-type {
			margin-left: 5px;
		}
		
		#controls img:last-of-type {
			margin-right: 0px;
		}
		
		#nextPageFrame {
			position:absolute;
            display: none;
		}
		
		::-webkit-scrollbar:horizontal,
		::-webkit-scrollbar-track:disabled {
		    display: none;
		}		
        ::-webkit-scrollbar-thumb {
            -webkit-border-image: url(assets/images/scrollbar-thumb.png) 19 0 19 0;
            border-width: 19px 0;
            min-height: 40px;
        }
        ::-webkit-scrollbar-track {
            margin-top: 20px;
            margin-bottom: 20px;
            -webkit-border-image: url(assets/images/scrollbar-track.png) 21 0 21 0;
            border-width: 21px 0;
        }
        ::-webkit-scrollbar {
            width: 21px;
        }

		
		@media print {
			body {
				background: #fff !important;
			}
			
			#controls, .footer, .loader {
				display: none !important;
			}
			
			#articleContainer {
				width: auto !important;
				height: auto !important;
			}
			
			#article, .page, .contentWrapper {
				border: none;
				margin: 0px !important;
				padding: 0px !important;
				font-size: 12pt;
			}
			
			.page {
				background: #fff !important;
			}
			
			.page, a:link, a:visited {
				color: #000 !important;
			}
			
			a:link, a:visited {
				color: #520 !important;
				background: transparent;
				?text-decoration: underline;
			}
			
			.content a:link:after, .content a:visited:after {
				?content: " (" attr(href) ") ";
				font-size: 80%;
				color: #853 !important;
			}
			
			.page:last-of-type .articleInfo {
				display: block !important;
			}
			
			.page .pageNumber {
				float: none;
				background: #fafafa;
				color: #000;
				border: solid 2px #eee;
				border-left: none;
				border-right: none;
				border-radius: 0px;
				margin-top: 15px;
				margin-bottom: 15px;
			}
		}
	</style>
	
	<script type="text/javascript">
		var smoothScrollEnabled = true;
		var lastSmoothScrollTime = 0;
		var controlsTimer = null;
		
		function init() {
			setTimeout(function() {
				controlsMouseOver();
				controlsMouseOut();
			}, 1000);
		}
		
		function $() {
			return document.getElementById.apply(document, arguments);
		}
		
		function scrollArticle(event, strictDelta) {
			if (!smoothScrollEnabled && event.srcElement != document.body)
				return true;
			
			var scrollDelta;
			if (strictDelta)
				scrollDelta = -event.wheelDeltaY;
			else
				scrollDelta = (event.wheelDeltaY > 0 ? -200 : 200);
			
			if (smoothScrollEnabled) {
				var scrollDuration = Math.max(Math.min(140, Date.now() - lastSmoothScrollTime), 1);
				smoothScroll($("articleContainer"), 0, scrollDelta, Date.now(), scrollDuration);
			}
			else {
				$("articleContainer").scrollTop += scrollDelta;
			}
			lastSmoothScrollTime = Date.now();

			return false;
		}
		
		function smoothScroll(element, scrollCurrent, scrollDelta, startTime, duration) {
			if ((scrollDelta < 0 && element.scrollTop <= 0)
				|| (scrollDelta > 0 && element.scrollTop >= element.scrollHeight - element.clientHeight))
				return;
			
			var percent = (Date.now() - startTime) / duration;
			if (percent >= 1) {
				scrollDelta -= scrollCurrent;
				element.scrollTop += scrollDelta;
				return;
			}
			
			var increment = Math.floor(percent * scrollDelta) - scrollCurrent;
			element.scrollTop += increment;
			scrollCurrent += increment;
			setTimeout(smoothScroll, 10, element, scrollCurrent, scrollDelta, startTime, duration);
		}
		
		function onKeyDown(event) {
			if (event.keyIdentifier == 'Up')
				scrollArticle({ srcElement: document.body, wheelDeltaY: 50 }, true);
			else if (event.keyIdentifier == 'Down')
				scrollArticle({ srcElement: document.body, wheelDeltaY: -50 }, true);
			else
				return true;
			
			return false;
		}
		
		function controlsMouseOver(event){
			clearTimeout(controlsTimer);
			$("controls").className = "visible";
		}

		function controlsMouseOut(event){
			clearTimeout(controlsTimer);
			controlsTimer = setTimeout(function() {
				$("controls").className = "";
			}, 1000);
		}
		
		function printArticle() {
			window.print();
		}
	</script>
</head>
<body onload="init();" onmousewheel="return scrollArticle(event);" onkeydown="return onKeyDown(event);">
	<div id="articleContainer">
		<div id="article">
			<!--img src="assets/images/close2.png" width="20" 
				style="position: fixed; left: 50%; margin-left: 378px; margin-top: -35px;">
			<img src="assets/images/options2.png" width="20" 
				style="position: fixed; left: 50%; margin-left: 352px; margin-top: -35px;"-->
			
			<div class="page">
				<div class="pageNumber">1</div>
				
				<div class="contentWrapper">
					<h1 id="title">iPhone 4 Up For Pre-Order — Black Only</h1>
					
					<div class="content">
						<div class="snap_preview"><p>
						<!--img class="alignnone size-full wp-image-189449" title="a" src="http://tctechcrunch.files.wordpress.com/2010/06/a4.png?w=630&amp;h=362" alt="" width="630" height="362"--></p>
						<p>Henry Ford once famously said, “<em>Any customer&nbsp;can have a car painted&nbsp;any colour that he wants so long as it is black</em>.” The same can now be said for the <a href="/08/initial-iphone-4-review/">iPhone 4</a>.</p>
						<p>longlinewithoutspacelonglinewithoutspacelonglinewithoutspacelonglinewithoutspacelonglinewithoutspacelonglinewithoutspace</p>
						<p>Just moments ago, Apple’s latest mobile device was put up for pre-sale on <a href="http://store.apple.com">Apple’s Online Store
						<!--img alt="" id="snap_com_shot_link_icon" class="snap_preview_icon" style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; max-height: 2000px; max-width: 2000px; min-width: 0px; min-height: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: normal; font-weight: normal; font-family: 'trebuchet ms', arial, helvetica, sans-serif; float: none; left: auto; top: auto; line-height: normal; background-color: transparent; background-image: url(http://i.ixnp.com/images/v6.34/theme/silver/palette.gif); width: 14px; height: 12px; padding-top: 1px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; position: static; vertical-align: top; display: inline; visibility: visible; background-position: -1128px 0px; background-repeat: no-repeat no-repeat; " src="http://i.ixnp.com/images/v6.34/t.gif"-->
						</a>.&nbsp;But as was rumored, it’s only available for pre-order in black.&nbsp;As the store notes, <em>“White iPhone currently unavailable for pre-order or in-store pickup</em>.<strong>” </strong>They don’t give an estimate as to when the white one will be available, but it will undoubtedly be at some point this Summer.</p>
						<p>Meanwhile, if you want the black one, you can pre-order it now. As expected, it’s $199 for the 16 GB version, and $299 for the 32 GB version (assuming you sign a new two-year contract with AT&amp;T for each). The phones will be delivered on June 24, or available for in-store pick-up if you choose that option.</p>
						<p>You can also pick up the last-generation iPhone 3GS (8 GB) for $99 now — it too will be available in stores on June 24.</p>
						<p><strong>Update</strong>: There are numerous reports of failures when people try to pre-order the new phone. There seems to be some sort of hang-up on AT&amp;T’s end. But if you order the phone through AT&amp;T’s website I’m told it’s working (but you have to have it delivered).</p>
						</div>
					</div>
					
					<div class="articleInfo">
						<!--hr /-->
						<table>
							<tr>
								<td width="100%" valign="top">
									<img class="icon favicon" src="assets/images/icon-16.png" width="16" height="16" alt="Favicon">
									<h3 class="website">techcrunch.com</h3><br />
									<img class="icon" src="assets/images/webpage.png" width="16" height="16" alt="Article URL">
									<span class="url longUrl">http://techcrunch.com/2010/06/10/google-kills-its-homepage-background-image-experiment-early/</span><br /><br />
									<img class="icon" src="assets/images/link.png" width="16" height="16" alt="Short URL">
									<span class="url shortUrl">http://goo.gl/ffgS</span>
								</td>
								<td align="center">
									<img class="qr" src="http://goo.gl/ffgS.qr" width="150" height="150" alt="QR Code">
								</td>
							</tr>
						</table>
					</div>
					
					<div class="footer">
						<table>
							<tr>
								<td width="100%">iReader</td>
								<td><img src="assets/images/icon-128.png" alt="iReader Logo"></td>
							</tr>
						</table>
					</div>
				</div>
				
				<div class="loader">
					<img src="assets/images/loading3.gif" alt="Loading...">
				</div>
				
				<div style="clear: both;"></div>
			</div>			
		</div>
		
		<div id="controls" onmouseover="controlsMouseOver(event);" onmouseout="controlsMouseOut(event);">
			<img id="btnZoomIn" src="assets/images/zoom-in.png" title="Zoom In" alt="">
			<img id="btnZoomOut" src="assets/images/zoom-out.png" title="Zoom Out" alt="">
			<img id="btnPrint" src="assets/images/print.png" title="Print this page" class="newGroup" onclick="printArticle();" alt="">
			<img id="btnEmail" src="assets/images/email.png" title="Mail this page" class="newGroup" alt="">
			<img id="btnTwitter" src="assets/images/twitter.png" title="Tweet this page" alt="">
			<img id="btnFacebook" src="assets/images/facebook.png" title="Send to Facebook" alt="">
			<img id="btnImages" src="assets/images/images-on.png" title="Enable/Disable images" class="newGroup" alt="">
			<img id="btnOptions" src="assets/images/options.png" title="iReader Options" class="newGroup" alt="">
			<img id="btnClose" src="assets/images/close.png" title="Exit iReader" alt="">
		</div>
	</div>
	<iframe id="nextPageFrame"></iframe>
</body>
</html>